<template>
	<view class="dmm-container dmm-container-grey">
		<u-list @scrolltolower="scrolltolower">
			<cl-descriptions>
				<cl-desc-item v-for="(item, index) in desc" :key="index" :label="item.label" :content="item.content" :isLink="item.isLink" url="/pages/merchantManage/changeRate?modifyType=3">
					<view v-if="item.insertSlot" class="content" slot="content">
						<text class="text text-primary" style="margin-right: 10rpx;">{{item.insertSlot.rate}}% </text>
						<text class="text"> / {{item.insertSlot.rateStatus}}</text>
					</view>
				</cl-desc-item>
			</cl-descriptions>

			<view class="section">
				<u-list-item v-for="(item, index) in list" :key="index">
					<u-cell :title="`列表长度-${index + 1}`">
						<text slot="value" class="text text-primary text-b">3,000.00元</text>
					</u-cell>
				</u-list-item>

			</view>
		</u-list>

	</view>
</template>

<script>
	import {
		mapState,
		mapActions
	} from 'vuex'
	import {
		merchantCerStatusEnum,
		rateStatusEnum
	} from "@/common/constants.js"

	export default {
		data() {
			return {
				listHeight: 0,
			}
		},

		computed: {
			...mapState('manageDetail', ['detail', 'list', 'pageNum', 'hasData']),
			desc: function() {
				const {
					rate,
					rateStatus,
					mount = 0,
					createdTime,
					merchantCertStatus,
					extend
				} = this.detail
				const {merShortName, custTel} = extend || {}
				return [{
						label: '商户名称',
						content: merShortName || custTel
					},
					{
						label: '手机号',
						content: custTel
					},
					{
						label: '商户费率',
						insertSlot: {
							rate,
							rateStatus: rateStatusEnum[rateStatus]
						},
						isLink: true
					},
					{
						label: '本月交易额',
						content: `${mount.toFixed(2)}元`
					},
					{
						label: '注册时间',
						content: createdTime
					},
					{
						label: '商户状态',
						content: merchantCerStatusEnum[merchantCertStatus]
					},
					{
						label: '注册地址',
						content: extend && extend.custAddr
					},
				]
			}
		},

		methods: {
			...mapActions('manageDetail', ['getDetail', 'getTradeList']),

			scrolltolower() {

			}
		},

		onLoad(options) {
			const {mno} = options
			
			this.getDetail({type: 'merchant', mno})
			this.getTradeList({type: 'merchant', mno})
			// uni.getSystemInfo({
			// 	success: (res) => {
			// 		const {
			// 			windowHeight
			// 		} = res


			// 		const desc = uni.createSelectorQuery().select('.desc')

			// 		desc.boundingClientRect((data) => {
			// 			console.log(this)
			// 			const {
			// 				height
			// 			} = data
			// 			this.listHeight = windowHeight - height - 20
			// 		}).exec()
			// 	}
			// })


		}
	}
</script>

<style lang="scss">
	.u-list {
		// height: auto !important;
	}
	.content {
		display: flex;
		flex-direction: row;
		align-items: center;
	}
</style>
